<template>
  <div class="Classification">
    <currencyTopAuto>
      <currencySearch></currencySearch>
    </currencyTopAuto>
    <div class="content">
      <ClassificationNav @set:classsifyid='getView'></ClassificationNav>
      <ClassificationList :content="content"></ClassificationList>
    </div>
  </div>
</template>
<script>
import currencySearch from "@/components/currency/currencySearch.vue";
import currencyTopAuto from "@/components/currency/currencyTopAuto.vue";
import ClassificationNav from "@/components/nav/ClassificationNav.vue";
import ClassificationList from "@/components/list/ClassificationList.vue";
import { getClassification } from "@/api";

export default {
  name: "Classification",
  data() {
    return {
      content: []
    };
  },
  components: {
    currencySearch,
    currencyTopAuto,
    ClassificationNav,
    ClassificationList
  },
  created() {
    this.getView();
  },
  methods: {
    getView(id) {
      getClassification(id).then(res => {
        this.content = res;
      });
    }
  }
};
</script>
<style scoped>
.Classification {
  height: 100%;
}
.content {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 0.88rem);
}
</style>